<template>
  <div class="page">
    <a-page-header
        class="page-header"
        style="border: 1px solid rgb(235, 237, 240)"
        title="大数据获客"
        @back="backAction"
    >
      <template #extra>
        <a-radio-group v-model:value="type"
                       @change="radioChange">
          <a-radio-button value="1" style="width: 50%;text-align: center">高级搜索
          </a-radio-button>
          <a-radio-button value="2" style="width: 50%;text-align: center">地图搜索
          </a-radio-button>
        </a-radio-group>
      </template>

    </a-page-header>

    <div class="page-box ">
      <template v-if="type=='1'">
        <div class="search-box" :class="!isFirst?'animate__animated animate__slideInDown':''"
             :style="{'marginTop':isFirst? '110px':'10px'}">

          <div class="search-title" v-if="isFirst">高级搜索</div>
          <div class="search-content">
            <a-row class="flex-1"
                   style="border: 1px solid #ccc;height: 100% ;">
              <a-col
                  :span="(searchRef.industry&&searchRef.area)?10:(!searchRef.industry&&!searchRef.area)?16:13">
                <a-input :bordered="false" placeholder="请输入关键字"
                         v-model:value="searchRef.keywords">
                </a-input>
              </a-col>
              <a-col :span="searchRef.industry?7:4" class="flex align-center">

                <a-divider type="vertical" style="width: 1px; background-color: #ccc"/>
                <a-cascader :bordered="false" v-model:value="searchRef.industry"
                            placeholder="行业"
                            style="overflow:hidden;"
                            class="text-center flex-1"
                            :options="industryOptions" @change="industryChange">
                  <template #suffixIcon>
                    <caret-down-outlined/>
                  </template>
                </a-cascader>

              </a-col>
              <a-col :span="searchRef.area?7:4" class="flex align-center">

                <a-divider type="vertical" style="width: 1px; background-color: #ccc"/>
                <a-cascader :bordered="false" v-model:value="searchRef.area" placeholder="区域"
                            style="overflow:hidden;"
                            class="text-center flex-1"
                            :options="areaOptions" @change="areaChange">
                  <template #suffixIcon>
                    <caret-down-outlined/>
                  </template>
                </a-cascader>

              </a-col>
            </a-row>
            <div
                style="height: 100%;width: 100px;margin-left: -1px;background-color: #2681f3;color:white;font-size: 14px;text-align: center;cursor: pointer;padding: 0 10px"
                @click="searchCompany">
              <search-outlined class="mr-5"/>
              搜索企业
            </div>
          </div>
          <div class="mt-20 flex justify-between search-bottom align-center"
               :class="!isFirst?'solid-top':''">
            <div class="flex-1 flex " v-if="searchTags.length">
              <span class="mr-10">已选择条件</span>
              <a-tag closable color="blue" v-for="tag in searchTags " style="display: block"
                     @close="tagClose(tag)">
                {{ tag.title }}
              </a-tag>
              <a-tag @click="resetSearch">重置选项</a-tag>
              <div v-if="companyList.length">为你找到<span class="ml-5 mr5 text-blue"> {{
                  companyList.length
                }}</span> 条相关结果
              </div>
            </div>
            <div class="flex-1" v-else></div>
            <a-space v-if="!isFirst">
              <a-button type="link" @click="allSelect">{{ !isAll ? '全选' : '取消全选' }}</a-button>
              <a-button type="primary" ghost @click="addRules"
                        :disabled="selectCompanyList.length==0">添加线索
              </a-button>
              <a-button type="primary" ghost @click="exportPhotos"
                        :disabled="selectCompanyList.length==0" :loading="isExport">导出画像
              </a-button>
            </a-space>
          </div>
        </div>
        <div class="search-list  mt-10" v-if="companyList.length" ref="listRef"
             @scroll="handleScroll">
          <div v-for="(item,index) in companyList" class="company-item"
               @click="showItem(item)">
            <div class="flex justify-between align-center">
              <div class=" " style="cursor: pointer" @click.stop="changeSelect(item)">
                <a-checkbox v-model:checked="item.checked"/>
                <span class="ml-5 name">{{ item.name }}</span>
              </div>
              <a-tag :color="statusColor[item.regStatus]?statusColor[item.regStatus]:''">
                {{ item.regStatus }}
              </a-tag>
            </div>
            <a-row :gutter="[0,12]" class="mt-20">
              <a-col span="4">
                <span>法定代表人：{{ item.legalPersonName }}</span>
              </a-col>
              <a-col span="4">
                <span>所在地区：{{ item.base }}</span>
              </a-col>
              <a-col span="3">
                <span>企业ID：{{ item.id }}</span>
              </a-col>
              <a-col span="5">
                <span>统一社会信用代码：{{ item.creditCode }}</span>
              </a-col>
              <a-col span="4">
                <div>机构类型：
                  <span v-if="item.companyType==1">公司</span>
                  <span v-if="item.companyType==2">香港公司会</span>
                  <span v-if="item.companyType==3">社会组织</span>
                  <span v-if="item.companyType==4">律所</span>
                  <span v-if="item.companyType==5">事业单位</span>
                  <span v-if="item.companyType==6">基金会</span>
                </div>
              </a-col>
              <a-col span="4">
                <span>组织机构代码：{{ item.orgNumber }}</span>
              </a-col>
              <a-col span="4">
                <span>成立日期：{{
                    item?.estiblishTime.length > 10 ? item?.estiblishTime.substring(0, 10) : item?.estiblishTime || "--"
                  }}</span>
              </a-col>
              <a-col span="4">
                <span>注册号：{{ item.regNumber }}</span>
              </a-col>
              <a-col span="3">
                <span>注册资本：{{ item.regCapital }}</span>
              </a-col>
              <a-col span="5">
                <span>匹配方式：{{ item.matchType }}</span>
              </a-col>
            </a-row>
          </div>
        </div>
        <div v-else style="margin-top: 180px">
          <a-empty v-if="!isFirst"></a-empty>
        </div>
      </template>
      <template v-else>
        <!--        地图Map-->
        <div class="map-container" ref="mapContainer" style="height: 100%;position:relative;">

          <div class="map-top">

            <a-radio-group v-model:value="mapStateType" class="flex-1">
              <a-popover>
                <template #content>
                  <span>点击这个按钮，即可拖动地图寻找目标区域</span>
                </template>
                <a-radio-button style="font-size: 18px" value="1" @click="toMoveMap">
                  <cu-icon type="org-shouzhi"/>
                </a-radio-button>
              </a-popover>
              <a-popover>
                <template #content>
                  <span>点击这个按钮后，即可在地图上画出一个圆圈，发现圆圈范围内的企业</span>
                </template>
                <a-radio-button style="font-size: 18px" value="2" @click="drawCircle">
                  <cu-icon type="org-yuanxingweixuanzhong"/>
                </a-radio-button>
              </a-popover>
            </a-radio-group>

            <a-space class="">
              <a-cascader style="width: 180px;font-size: 12px" @change="mapCityChange"
                          :options="areaOptions"
                          :defaultValue="defaultArea" placeholder="选择城市"></a-cascader>

            </a-space>
          </div>
        </div>


        <div
            class="open-box"
            @click="requestMapCompanyList">
          <LeftOutlined class="text-blue"/>
        </div>

      </template>

    </div>


    <!--    企业详情-->
    <CompanyDetail :visible="showDetail" :item="detailItem" @closeDetail="showDetail=false"/>

    <!--    企业列表-->
    <AttractingCompanyListDrawer :reqParams="reqParams" :params="mapParams"
                                 @toClose="companyListVisible=false"
                                 :visible="companyListVisible"/>

    <!--    添加线索-->
    <AttractingAddRuleModal :list="selectCompanyList" :filterNum="filterNum"
                            :visible="ruleAddVisible"
                            @cancel="ruleAddVisible=false"
                            @success="addRuleSuccess"/>

  </div>
</template>
<script>

import {toRefs, reactive, ref} from 'vue'
import CompanyDetail from '@/views/village/BusinessManage/modules/CompanyDetailDrawer.vue'
import _ from 'lodash'
import {useRouter} from 'vue-router'
import AttractingCompanyListDrawer from "./modules/AttractingCompanyListDrawer.vue"
import {LeftOutlined, SearchOutlined, CaretDownOutlined} from "@ant-design/icons-vue"
import request from '@/common/utils/request'
import AttractingAddRuleModal
  from '@/views/village/BusinessManage/modules/AttractingAddRuleModal.vue'
import utils from '@/common/utils/utils'
import {xlsx} from '@/common/utils/xlsx'
import {message} from 'ant-design-vue'
import dayjs from 'dayjs'

export default {
  name: "attractingCustomers",
  components: {
    AttractingAddRuleModal,
    CompanyDetail,
    AttractingCompanyListDrawer,
    LeftOutlined,
    SearchOutlined,
    CaretDownOutlined,
  },
  setup() {
    const state = reactive({
      companyList: [],
      type: "1", ///高级搜索。地图搜索
      mapStateType: "1", //拖动、画图
      memberList: [1, 2, 3, 4],
      showDetail: false,
      detailItem: {},
      isFirst: true,
      page: 1,
      mapContainer: null,
      currentAddress: {}, // 选中地址
      addressList: [],
      geocoder: null,
      circleRange: 1,
      mapParams: {},
      companyListVisible: false,
      searchTags: [],
      industryOptions: [],
      areaOptions: [],
      ruleAddVisible: false,
      selectCompanyList: [],
      reqParams: {}, //地图的数据
      isExport: false,
      cityKeyword: "",
      defaultArea: undefined,
      listRef: null,
      filterNum: 0,
      statusColor: {
        "正常": "green",
        "存续": "green",
        "在业": "green",
        "吊销": "red",
        "注销": "red",
        "停业": "red",
        "清算": "orange",
        "撤销": "orange",
        "迁出": "blue",
        "迁入": "cyan",
      },
      isAll: false,
    })

    const searchRef = reactive({
      keywords: "",
      industry: "",
      industry_txt: "",
      area: "",
      area_txt: "",
    })

    const defaultCenterPoint = {lat: 39.916527, lng: 116.397128};
    // 地图实例
    let map = null;
    let marker = null; // 标注

    let kwTimeout = null;
    let keywords = "";
    let localsearch = null;
    let circleTool = null;
    // 监听选取点拖动
    let onMarkerDragendInit = false;


    const localSearchResult = (result) => {

      console.log(result)
      if (result.area) {
        let cityLngLat = result.area.lonlat?.split(',');
        currentLngLat = new T.LngLat(cityLngLat[0], cityLngLat[1]);
        map.centerAndZoom(currentLngLat, 12);
        setMarker(currentLngLat)

      }
    };


    const getLocationByLatLngResult = (result) => {
      // 根据用户移动的来 设置搜索 和 结果
      let current = {
        name: result.formatted_address,
        hotPointID: result.location.lon,
        latLng: {
          lat: result.location.lat,
          lng: result.location.lon,
        }
      }
      state.addressList = [current];
      state.currentAddress = current;
      setMarker();
    };

    const getLocationByAddress = () => {
      // 根据用户选中的来标记地址
      // if (!_.isEmpty(props.latLng)) {
      //   let lngLat = new T.LngLat(
      //       props.latLng.lng,
      //       props.latLng.lat,
      //   );
      //   state.geocoder.getLocation(lngLat, getLocationByLatLngResult);
      // } else {
      //   const address = props.district + props.address;
      //   state.geocoder.getPoint(address, searchResult);
      // }
    };
    const getLocationByLatLng = (location) => {
      if (!location) return;
      let lngLat = new T.LngLat(
          location.lng,
          location.lat,
      );
      state.geocoder.getLocation(lngLat, getLocationByLatLngResult);
    };


    const onMarkerDragend = () => {
      if (onMarkerDragendInit) {
        return;
      }
      onMarkerDragendInit = true;
      marker.addEventListener("dragend", (res) => {
        getLocationByLatLng(res.lnglat);
      });
    };


    // 设置、更新选取点
    const setMarker = (position) => {
      if (!position) {
        if (!state.currentAddress.latLng) {
          getLocationByAddress();
          return;
        }
        // 自己拖动的时候
        position = state.currentAddress.latLng;
      }
      let lngLat = new T.LngLat(
          position.lng,
          position.lat,
      );
      map.panTo(lngLat);
      if (marker) {
        marker.setLngLat(lngLat);
      } else {
        //创建标注对象
        marker = new T.Marker(lngLat, {
          draggable: true,
        });
      }
      map.addOverLay(marker);
      onMarkerDragend();
    };

    let currentLngLat = new T.LngLat(
        defaultCenterPoint.lng,
        defaultCenterPoint.lat,
    );
    // 初始化地图
    const initMap = () => {

      if (!map) {
        map = new T.Map(state.mapContainer, {datasourcesControl: true});
        map.centerAndZoom(currentLngLat, 12);
        // //创建地图类型
        // let typeControl = new T.Control.MapType();
        // //创建缩放平移控件对象
        // let zoomControl = new T.Control.Zoom();
        // //添加控件
        // map.addControl(typeControl);
        // map.addControl(zoomControl);
        state.geocoder = new T.Geocoder();
        //监听滑动
        map.addEventListener("moveend", mapMoveend);
        map.addEventListener("click", mapClick)
      }

      let config = {
        pageCapacity: 1,
        onSearchComplete: localSearchResult, //接收数据的回调函数
      };
      //创建搜索对象
      localsearch = new T.LocalSearch(map, config);
      if (state.cityKeyword) {
        localsearch.search(state.cityKeyword);
      }


      circleTool = new T.CircleTool(map
          , {color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5}
      );
      circleTool.on('draw', function (e) {
        onDrawCircle(e.currentCenter, e.currentRadius);

      });
      setMarker(currentLngLat);
    };

    const onDrawCircle = (center, radius) => {

      setTimeout(() => {
        circleTool.close()
        state.circleRange = _.ceil(radius / 1000, 2) ? _.ceil(radius / 1000, 2) : 1
        state.mapStateType = "1"
        requestMapCompanyList()
      }, 500)
    }


    const drawCircle = () => {
      circleTool.open()
      remove_overlay()

      // // 定义该矩形的显示区域
      // var circle = new T.Circle(currentLngLat, 1000 * state.circleRange, {
      //   color: "#2681f3",
      //   weight: 4,
      //   opacity: 0.5,
      //   fillColor: "#E2EBF1",
      //   fillOpacity: 0.5,
      //   lineStyle: "solid"
      // });
      // //向地图上添加圆
      // map.addOverLay(circle);
      //
      // setTimeout(() => {
      //   map.enableDrag()
      //   state.mapStateType = "1"
      // }, 1000)
    }


    const addCompanyMarks = () => {


      // // 向地图添加公司个标注
      // for (var i = 0; i < state.mapDataList.length; i++) {
      //   const item = state.mapDataList[i];
      //   var point = new T.LngLat(item.lng, item.lat);
      //   var pdefinedOverlay = new definedOverlay(point, item.title, item.address, {});
      //   map.addOverLay(pdefinedOverlay);
      // }
    }


    //清除覆盖物
    const remove_overlay = () => {
      try {
        map.clearOverLays();
      } catch (e) {
        console.log(e)
      }
    }


    const requestMapCompanyList = () => {

      if (!currentLngLat) {
        currentLngLat = new T.LngLat(
            defaultCenterPoint.lng,
            defaultCenterPoint.lat,
        );
      }
      setMarker(currentLngLat)
      state.mapParams = {
        title: state.cityKeyword,
        range: state.circleRange
      }
      state.reqParams = {
        type: 2,
        lat: currentLngLat.lat,
        lng: currentLngLat.lng,
        distance: state.circleRange * 1000,
        page: 1,
        limit: 20,
      }
      setTimeout(() => {
        state.companyListVisible = true;
      }, 1000)

    }

    let removerTimer = null
    const mapMoveend = (e) => {
      currentLngLat = new T.LngLat(
          e.target.getCenter().getLng(),
          e.target.getCenter().getLat()
      );


    }

    const mapClick = () => {
      if (state.mapStateType == '2') {
        circleTool.open()
      }
    }

    const getCompanyTypeName = (value) => {
      let company_type = "公司";
      if (value == 2) {
        company_type = "香港公司会"
      } else if (value == 3) {
        company_type = "社会组织"
      } else if (value == 4) {
        company_type = "律所"
      } else if (value == 5) {
        company_type = "事业单位"
      } else if (value == 6) {
        company_type = "基金会"
      }
      return company_type
    }

    const showItem = (record) => {

      let company_type = getCompanyTypeName(record.company_type)
      state.detailItem = {
        id: record.id, "base": record.base, company_type: company_type
      }
      state.showDetail = true
    }
    const allCheck = () => {
      console.log(111)
    }

    const radioChange = () => {
      if (state.type == '2') {
        map = null
        setTimeout(() => {
          initMap()
        }, 500)
      }
    }


    const getCompanyList = () => {

      const params = {
        page: state.page,
        limit: 20,
        type: state.type,
      }
      if (searchRef.keywords) {
        params.keyword = searchRef.keywords
      }
      if (searchRef.industry) {
        params.industry = searchRef.industry[searchRef.industry.length - 1]
      }
      if (searchRef.area) {
        params.area = searchRef.area[searchRef.area.length - 1]
      }

      request.post("/org", "/business/clue/getCustomerByData", params).then(res => {
        console.log(res)
        if (state.page == 1) {
          state.companyList = res.list.map(item => {
            return {
              checked: false,
              ...item,
            }
          })
          state.selectCompanyList = []
        } else {
          state.companyList = state.companyList.concat(res.list.map(item => {
            return {
              checked: false,
              ...item,
            }
          }))
        }
      })
    }


    const handleScroll = () => {
      if (state.listRef.scrollTop + state.listRef.clientHeight === state.listRef.scrollHeight) {
        state.page++;
        getCompanyList()
      }
    }

    const requestIndustryByData = () => {
      request.get("/org", "/business/clue/getIndustryByData", {}).then(res => {
        state.areaOptions = res.list.area.map(item => {
          return {
            label: item.name,
            value: item.areaCode,
            children: item.city?.map(it => {
              return {
                label: it.name,
                value: it.areaCode,
                children: it.district.map(ii => {
                  return {label: ii.name, value: ii.areaCode}
                }) || []
              }
            }) || []
          }
        })


        const defaultArea = []
        let keyword = ''
        state.areaOptions.forEach((item, index) => {
          if (index == 0) {
            defaultArea.push(item.value)
            keyword = keyword + item.label
            item.children.forEach((city, cityIndex) => {
              if (cityIndex == 0) {
                defaultArea.push(city.value)
                keyword = keyword + city.label
                city.children.forEach((district, districtIndex) => {
                  if (districtIndex == 0) {
                    defaultArea.push(district.value)
                    keyword = keyword + district.label
                  }
                })
              }
            })
          }
        })
        state.cityKeyword = keyword
        state.defaultArea = defaultArea

        state.industryOptions = res.list.industry.map(item => {
          return {
            label: item.primInduName,
            value: item.code,
            children: item.secList?.map(it => {
              return {
                label: it.secnduName,
                value: it.code,
                children: it.terList.map(ii => {
                  return {label: ii.terInduName, value: ii.code}
                }) || []
              }
            }) || []
          }
        })
      })
    }
    requestIndustryByData()

    const resetSearch = () => {
      state.searchTags = []
      for (const argumentsKey in searchRef) {
        searchRef[argumentsKey] = ""
      }
      state.page = 1
      getCompanyList()
    }

    const searchCompany = () => {

      if (searchRef.keywords) {
        if (state.searchTags.find(it => {
          return it.key == 'keywords'
        })) {
          state.searchTags.forEach(item => {
            if (item.key == 'keywords') {
              item.title = `关键词：${searchRef.keywords}`
            }
          })
        } else {
          state.searchTags.push({
            key: "keywords",
            title: `关键词：${searchRef.keywords}`
          })
        }
      }

      if (!state.searchTags.length) {
        message.warning("请选择条件后查询！")
        return
      }
      state.isFirst = false
      state.page = 1;
      getCompanyList()
    }

    const searchByTag = (tagKey) => {
      const tags = _.cloneDeep(state.searchTags)
      state.searchTags = tags.filter(item => {
        return item.key != tagKey
      })
      console.log(state.searchTags, "xxxxx")
      // if (state.searchTags.length == 0) {
      //   resetSearch()
      // } else {
      //   searchCompany()
      // }
    }

    const tagClose = (tag) => {

      if (tag.key == "keywords") {
        searchRef.keywords = ""
      } else if (tag.key == "industry") {
        searchRef.industry = ""
        searchRef.industry_txt = ""
      } else if (tag.key == "area") {
        searchRef.area = ""
        searchRef.area_txt = ""
      }
      searchByTag(tag.key)

    }

    const industryChange = (value, selectedOptions) => {
      if (selectedOptions) {
        let industry = ''
        for (let i = 0; i < selectedOptions.length; i++) {
          console.log(selectedOptions[i])
          industry = industry + selectedOptions[i].label
        }
        searchRef.industry_txt = industry
        state.searchTags.push({
          key: "industry",
          title: `行业：${searchRef.industry_txt}`
        })
      } else {
        searchRef.industry = undefined
        searchRef.industry_txt = ""
        searchByTag("industry")
      }
    }

    const areaChange = (value, selectedOptions) => {
      if (selectedOptions) {
        let area = ''
        for (let i = 0; i < selectedOptions.length; i++) {
          area = area + selectedOptions[i].label
        }
        searchRef.area_txt = area
        // 和地图联动
        state.cityKeyword = area
        state.defaultArea = value
        state.searchTags.push({
          key: "area",
          title: `地区：${searchRef.area_txt}`
        })
      } else {
        searchRef.area = ""
        searchRef.area_txt = ""
        searchByTag("area")
      }

    }

    const changeSelect = (item) => {
      item.checked = !item.checked
      state.selectCompanyList = state.companyList.filter(item => {
        return item.checked == true
      })
      state.isAll = state.selectCompanyList.length == state.companyList.length
    }

    const allSelect = () => {
      state.isAll = !state.isAll
      state.companyList.forEach(item => {
        item.checked = state.isAll
      })
      state.selectCompanyList = state.companyList.filter(item => {
        return item.checked == true
      })
    }

    // 补全数据
    const fullData = () => {

      const ids = []
      state.companyList.forEach(item => {
        if (item.checked) {
          ids.push({
            id: item.id, base: item.base, companyType: getCompanyTypeName(item.company_type)
          })
        }
      })
      return new Promise((resolve) => {
        request.post("/org", "/business/clue/getClueByFullData", {ids: ids}).then(res => {
          state.filterNum = res.filterNum;
          resolve(res.list)
        })
      })

    }

    const addRules = () => {

      fullData().then(res => {
        state.selectCompanyList = res
        state.ruleAddVisible = true;
      })

    }

    const addRuleSuccess = () => {
      state.ruleAddVisible = false
      console.log('添加成功')
    }

    const columns = ref([
      {
        title: "公司名称",
        key: "name"
      },
      {
        title: "企业状态",
        key: "regStatus"
      },

      {
        title: "核准时间",
        key: "approvedTime"
      },
      {
        title: "法人",
        key: "legalPersonName"
      },
      {
        title: "所在地区",
        key: "base"
      },
      {
        title: "企业ID",
        key: "id"
      },
      {
        title: "联系方式",
        key: "contactInformation"
      },
      {
        title: "统一社会信用代码",
        key: "creditCode"
      },
      {
        title: "机构类型",
        key: "companyType"
      },
      {
        title: "组织机构代码",
        key: "orgNumber"
      },
      {
        title: "成立日期",
        key: "estiblishTime"
      },
      {
        title: "注册号",
        key: "regNumber"
      },
      {
        title: "注册资本",
        key: "regCapital"
      },
      {
        title: "经营开始时间",
        key: "fromTime"
      },
      {
        title: "经营结束时间",
        key: "toTime"
      },
      {
        title: "匹配方式",
        key: "matchType"
      }
    ])


    const exportPhotos = () => {
      let listHanders = {};
      listHanders = columns.value.reduce((obj, v) => {
        obj[v.key] = v.title;
        return obj;
      }, {});
      state.isExport = true;
      fullData().then((res) => {
        if (state.filterNum != 0) {
          message.warning(`为您过滤${state.filterNum}条信息，过滤原因：暂未查询到联系方式`)
        }
        const tempList = res.map(item => {

          let company_type = getCompanyTypeName(item.company_type)
          return {
            ...item,
            companyType: company_type,
            toTime: item?.toTime ? item.toTime : "--",

          }
        })
        let list = utils.deepClone(tempList);
        xlsx(list, listHanders, "大数据获客");
        message.success("导出成功,请等待文件生成");
        state.isExport = false;
      });
    }

    const mapCityChange = (value, selectedOptions) => {

      let keyword = ''
      for (let i = 0; i < selectedOptions.length; i++) {
        keyword = keyword + selectedOptions[i].label
      }
      state.cityKeyword = keyword
      localsearch.search(state.cityKeyword);
    }


    const toMoveMap = () => {
      map.enableDrag()
    }

    const setDefaultInfo = () => {
      state.isFirst = true
      state.companyList = []
      state.type = "1"
      state.searchTags = []
      for (const key in searchRef) {
        searchRef[key] = ""
      }
      map = null
      localsearch = null
      circleTool = null
    }

    const $router = useRouter()
    const backAction = () => {
      setDefaultInfo()
      $router.go(-1)

    }

    return {
      ...toRefs(state),
      allCheck,
      showItem,
      radioChange,
      searchCompany,
      tagClose,
      backAction,
      drawCircle,
      resetSearch,
      searchRef,
      allSelect,
      addRules,
      exportPhotos,
      addRuleSuccess,
      changeSelect,
      mapCityChange,
      industryChange,
      areaChange,
      toMoveMap,
      handleScroll,
      requestMapCompanyList,


    }
  }
}
</script>

<style lang="less" scoped>
.page {
  height: 100%;

  .page-header {
    background-color: white !important;
    height: 70px;
  }

  .search-box {
    width: 100%;
  }

  .search-title {
    color: black;
    font-weight: 800;
    font-size: 25px;
    text-align: center;
    padding-bottom: 55px;
  }

  .search-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    line-height: 45px;
    width: 44%;
    margin-left: 28%;

  }

  .search-bottom {
    padding-top: 20px;
  }

  .solid-top {
    border-top: 1px dashed #cccccc;
  }

  .page-box {
    margin-top: 10px;
    max-height: calc(100% - 70px);
    height: 100%;
    overflow: hidden;
    background-color: white;
    padding: 20px;

    display: flex;
    flex-direction: column;

    .search-list {
      overflow: scroll;
      flex: 1;
      padding: 0 10px 0 0;

      .company-item {
        border-bottom: 1px dashed #cccccc;
        border-radius: 5px;
        margin-top: 15px;
        padding: 20px;

        .name {
          font-weight: 600;
          font-size: 17px;
        }

      }

      .info-item {
        display: flex;
        align-items: center;
        margin-top: 10px;
        color: #666666;

        .title {
          width: 90px;
        }

        .content {
          flex: 1;
        }
      }

      .active-item {
        border: 1px solid #2681f3;
      }
    }


    .right-box {
      flex: 1;
      background-color: #f6f7f8;
      padding: 20px;

    }
  }
}

.open-box {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 40px;
  height: 50px;
  line-height: 50px;
  z-index: 1000;
  font-size: 20px;
  cursor: pointer;
  background: white;
  text-align: center
}

.map-top {
  position: absolute;
  z-index: 1000;
  top: 30px;
  left: 40px;
  right: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

:deep( .ant-select-arrow .anticon > svg) {
  color: #aaa;
}

:deep(.ant-input-number-input) {
  text-align: center;
}
</style>